<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('rbac.resource.authorizeForm.title')"
    :width="props.width"
    align-center
    :close-on-click-modal="false"
  >
    <el-form :rules="rules" :model="formData" ref="authorizeForm">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="group in createFromData"
          :key="group.id"
          :label="t(group.groupName)"
          :name="group.id"
        >
          <el-scrollbar :height="props.height">
            <el-collapse>
              <el-collapse-item v-for="system in group.systems" :key="system.id">
                <template #title>
                  <div class="system">
                    <template v-if="system.sysIcon">
                      <Icon
                        :icon="system.sysIcon"
                        :color="system.iconColor"
                        :hoverColor="system.iconColor"
                      />
                    </template>
                    {{ system.sysName }}
                  </div>
                </template>
                <wsm-menu v-model="formData" :data="system.menus" :root="true" />
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button-group>
          <el-button @click="centerDialogVisible = false">{{ t('common.close') }}</el-button>
          <el-button type="primary" @click="submit">
            {{ t('common.submit') }}
          </el-button>
        </el-button-group>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { AuthorizeFormDataType, AuthorizeFormPropsType, SystemGroupType } from './types'
import { useI18n } from '@/hooks/web/useI18n'
import { ElLoading, ElMessage, FormInstance, FormRules } from 'element-plus'
import { authorizeApi, authorizeTreeApi, loadAuthorizeApi } from '@/api/rbac/resource'
import WsmMenu from '../Menu/WsmMenu.vue'

const { t } = useI18n()

const centerDialogVisible = ref(false)
//获取配置参数
const props = withDefaults(defineProps<AuthorizeFormPropsType>(), {
  width: '50%',
  height: '400px'
})

const activeName = ref('')

//表单对象
const authorizeForm = ref<FormInstance>()

//表单校验
const rules = reactive<FormRules<AuthorizeFormDataType>>({})

//定义表单数据
const formData = ref<AuthorizeFormDataType>({
  resId: '',
  sysIds: {},
  menuIds: {},
  permIds: {}
})

//提交方法
const submit = async () => {
  const submitForm: {
    resId: string
    sysIds: string[]
    menuIds: string[]
    permIds: string[]
  } = {
    resId: formData.value.resId,
    sysIds: [],
    menuIds: [],
    permIds: []
  }
  for (const key in formData.value.sysIds) {
    if (formData.value.sysIds[key]) {
      submitForm.sysIds.push(key)
    }
  }
  for (const key in formData.value.menuIds) {
    if (formData.value.menuIds[key]) {
      submitForm.menuIds.push(key)
    }
  }
  for (const key in formData.value.permIds) {
    if (formData.value.permIds[key]) {
      submitForm.permIds.push(key)
    }
  }
  const loading = ElLoading.service({
    lock: true,
    text: t('common.submitMessage'),
    background: 'rgba(0, 0, 0, 0.7)'
  })
  const rs = await authorizeApi(submitForm, loading)
  if (rs.success) {
    ElMessage.success(rs.message)
    centerDialogVisible.value = false
  }
}

//创建表单的数据
const createFromData = ref<SystemGroupType[]>([])

//打开表单
const show = async (resId: string) => {
  const rs = await authorizeTreeApi({ resId })
  if (rs.success) {
    createFromData.value = rs.data
    if (rs.data && rs.data.length > 0) {
      activeName.value = rs.data[0].id
    }
    //加载数据
    const loadRs = await loadAuthorizeApi(resId)
    if (loadRs.success) {
      formData.value = loadRs.data
      centerDialogVisible.value = true
    }
  }
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

//暴露方法
defineExpose({ show, hide })
</script>
<style scoped>
.system-ui {
  list-style-type: none;
  margin-left: -40px;
}

.system {
  color: #008aff;
  font-weight: bold;
}
</style>
